<template>
  <div>
    <el-button type="success" @click="addHandle">创建任务</el-button>
    <div>
      <el-table :data="tableData" style="width: 100%" :show-overflow-tooltip="true" border stripe height="720px">
        <el-table-column label="序号" width="60" align="center">
          <template #default="{ $index }">
            {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
          </template>
        </el-table-column>
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                         :label="column.label" :width="column.width" :align="column.align">
        </el-table-column>
        <el-table-column label="操作" width="320" fixed="right" align="center">
          <template v-slot="scope">
            <el-button @click="executeTask(scope.row)" size="mini"
                       :loading="executeButtonLoading"
                       type="warning">执行
            </el-button>
            <el-button @click="openDetailHandle(scope.row)" size="mini"
                       type="success">明细
            </el-button>
            <el-button @click="editHandle(scope.row)" size="mini"
                       type="primary">编辑
            </el-button>
            <el-button @click="deleteHandle(scope.row)" size="mini"
                       type="danger">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="currentPage"
                     :page-size="pageSize"
                     :total="totalItems"
                     :page-sizes="[10, 20, 50, 100]"
                     @size-change="pageSizeChange"
                     @current-change="handleCurrentChange"
                     background layout="total,sizes,prev, pager, next" class="pagination" prev-text="上一页" next-text="下一页"></el-pagination>
    </div>
    <TaskModal ref="taskRef" @ok="fetchData"></TaskModal>
  </div>

</template>

<script setup>
import TaskModal from './TaskModal.vue'
import request from '@/config/axios'
import {ref} from "vue";
const taskRef = ref()
const tableData = ref([])
const columns = ref([
  {prop: 'taskName', label: '任务名称', width: 100, align: 'center'},
  {prop: 'answerRecordStartTime', label: '接听记录开始时间', width: 160, align: 'center'},
  {prop: 'answerRecordEndTime', label: '接听记录结束时间', width: 160, align: 'center'},
  {prop: 'taskStatus', label: '任务状态', width: 120, align: 'center'},
  {prop: 'executeTime', label: '执行时间', width: 160, align: 'center'},
  {prop: 'taskMemo', label: '任务备注', align: 'center'},
])

const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

const fetchData = async function () {
  const res = await request.get({
    url: '/answerRecordTask/list',
    params: {current: currentPage.value, size: pageSize.value}
  })
  tableData.value = res.records
  totalItems.value = res.total
  currentPage.value = res.current
}

const handleCurrentChange = function (val) {
  currentPage.value = val
  fetchData()
}

const pageSizeChange = function (val) {
  pageSize.value = val
  fetchData()
}

const executeButtonLoading = ref(false)
const executeTask = async function (taskData) {
  try {
    executeButtonLoading.value = true
    const res = await request.post({
      url: '/answerRecordTask/startAnswerRecordTask',
      data: taskData
    })
    fetchData()
    ElMessage.success(res)
  }catch (e) {

  }finally {
    setTimeout(() => {
      executeButtonLoading.value = false
    }, 1000*3)

  }

}
const emit = defineEmits(["openDetail"])
const openDetailHandle = function (taskData) {
  emit("openDetail", taskData)

}
const addHandle = function () {
  taskRef.value?.add()
}

const editHandle = function (row) {
  taskRef.value?.edit(row)
}

const deleteHandle = function(row){
  ElMessageBox.confirm('是否确认删除?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(()=>{
    request.delete({
      url: '/answerRecordTask/deleteById',
      params: { id: row.id }
    }).then(()=>{
      fetchData()
      ElMessage.success('删除成功')
    })
  }).catch(()=>{
    ElMessage.info('已取消')
  })
}


onMounted(() => {
  fetchData()
})


</script>

<style scoped>
.pagination {
  margin-top: 20px;
  float: right;
  font-size: 22px;
}
</style>
